<template>
	<view class="container">
		<view class="vip-cards">
			<view class="card flex-cenetr-wrap" v-for="(item,i) in list" :key='i'>
				<view class="text">{{item.title}}</view>
				<view class="account">{{item.account}}</view>
				<view class="icon-img">
					<image src="" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[
					{
						'title':'消费折扣',
						'account':'满100享9折',
					},
					{
						'title':'倍数积分',
						'account':'3倍积分',
					},
					{
						'title':'消费折扣',
						'account':'满100享9折',
					},
					{
						'title':'消费折扣',
						'account':'满100享9折',
					},
					{
						'title':'消费折扣',
						'account':'满100享9折',
					}
				]
			}
		}
	}
</script>

<style>
	@import url("../../common/css/iconfont.css");
	@import url("../../common/css/common.css");
	.container{
		width: 100%;
		height: 100%;
		background: #FFF;
		border-radius: 3px;
	}
	.vip-cards{
		padding: 0 0 0 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.card{
		width:198rpx;
		height: 236rpx;
		background: #F0F4FC;
		border-radius: 6px;
		margin-bottom:16rpx;
		margin-right:12rpx;
	}
	.card .text{
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2C2A;
		line-height: 42rpx;
		letter-spacing: 1px;
	}
	.account{
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #928888;
		line-height: 28rpx;
		margin-bottom: 24rpx;
	}
	.icon-img{
		width: 68rpx;
		height: 68rpx;
		background-color: #fff;
	}
</style>
